<template>
	<view class="content">
		<view class="feed">
			<view class="feed-tit">反馈类型</view>
			<view class="feed-con">
				订单问题
			</view>
		</view>
		
		<view class="feed">
			<view class="feed-tit">订单编号</view>
			<view class="feed-con">
				15486515151
			</view>
		</view>
		
		<view class="feed">
			<view class="feed-tit">反馈内容</view>
			<view class="feed-con">
				退款退不了
			</view>
		</view>
		
		<view class="feed">
			<view class="feed-tit">其他资料</view>
			<view class="feed-con">
				<block v-for="(item, index) in photos" :key="index">
				<view class="apply-img">
					<image :src="item.src" mode="widthFix" @click="previewImage(index)" class="photo"></image>
				</view>
				</block>
			</view>
			<view class="feed-con">
				<view class="apply-img">
					<image src="../../static/server0.jpg" mode="aspectFill" class="photo"></image>
				</view>				
			</view>
		</view>
		
	</view>
</template>
<script>
export default {
    data() {
        return {
			photos: [
				{
					id: '1',
					src:
						'/static/tech.jpg'
				},
				{
					id: '2',
					src:
						'/static/tech.jpg'
				},
				{
					id: '3',
					src:
						'/static/tech.jpg'
				},
				{
					id: '4',
					src:
						'/static/tech.jpg'
				}
			]	
        }
    },
    methods: {
		previewImage(index) {
			let photoList = this.photos.map(item => {
				return item.src;
			});
			uni.previewImage({
				current: index,
				urls: photoList
			});
		}
    }
}

</script>
<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
.content{
	.feed-hint{
		margin: 0 20rpx 30rpx;
		font-size: 24rpx;
		color: #f00;
	}
	.feed{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.feed-tips{
			margin-top: 20rpx;
			font-size: 24rpx;
			color: rgb(118, 118, 118);
		}
		.feed-tip{
			font-size: 28rpx;
			color:rgb(118, 118, 118);
		}
		.feed-tit{
			font-weight: bold;
			font-size:32rpx;
			margin-bottom: 20rpx;
			text{
				color: #f00;
				margin-left: 10rpx;
			}
		}
		.feed-con{
			font-size: 28rpx;
			.apply-img{
			  width: 150rpx;
			  height: 150rpx;
			  overflow: hidden;
			  display: inline-block;
			  position: relative;
			  margin:10rpx 10rpx 0 0;
			}
			.photo{
			  width: 150rpx;
			  height: 150rpx;
			}
			.del{
			  width: 30%;
			  position: absolute;
			  right:5rpx;
			  top: 5rpx;
			}
			.feed-text{
				padding:20rpx;
				font-size: 28rpx;
				border-radius: 20rpx;
				background-color: $uni-bg-color-grey;
			}
			.feed-input{
				margin: 20rpx 0 0;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 20rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				background-color: $uni-bg-color-grey;
			}
			text{
				width: 31%;
				height: 60rpx;
				font-size: 28rpx;
				margin: 10rpx 18rpx 10rpx 0;
				line-height: 60rpx;
				border-radius:30rpx;
				display: inline-block;
				text-align: center;
				background-color: $uni-bg-color-grey;
				&:nth-child(3n){
					margin: 10rpx 0 10rpx 0;
				}
				&.feed-act{
					color: #fff;
					background-color: $uni-text-color-active;
				}
			}
		}
	}
	.detail-sel{
		display: flex;
		padding: 20rpx 10rpx;
		position:fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		text-align: center;
		.detail-btn{
			margin: 0 10rpx;
			flex: 1;
			height:70rpx;
			line-height: 70rpx;
			border-radius: 35rpx;
			color: #fff;
			font-size: 28rpx;
			background-color:$uni-text-color-active;
			&:first-child{
				background-color:#fff;
				border:2rpx solid $uni-text-color-active;
				color: $uni-text-color-active;
			}
		}
	}
	.h110{
		width: 100%;
		height:110rpx;
	}
}
</style>